<template>
    <div class="tool-card">
        <FontAwesomeIcon :icon="getStatusIcon(status)" class="status-icon" />
      
      <i :class="icon"></i>
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
      <button class="custom-button" @click="handleUseTool(state)">立即使用</button>
 
    </div>
  </template>
  
  

    <script>
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   import { library } from '@fortawesome/fontawesome-svg-core'
   import { faCheckCircle, faTimesCircle, faSyncAlt, faBan } from '@fortawesome/free-solid-svg-icons'

   export default {
     components: {
       FontAwesomeIcon,
     },
    props: {
      title: String,
      description: String,
      icon: String,
      status: Number, // 新增状态属性
      state:Number,
      url:String
    },
    data() {
       return {
         // 初始化图标库
         iconsLibrary: library.add(faCheckCircle, faTimesCircle, faSyncAlt, faBan),
       };
     },
    methods: {
        handleUseTool(state) {
      switch (state) {
        case 1:
            this.$router.push(this.url)
            break;
        case 0:
          this.$alert('该工具已经停用，请选择其他工具。', '提示', {
            confirmButtonText: '确定',
            type: 'warning',
          });
          break;
        case 2:
          this.$alert('该工具正在升级，请稍后再试。', '警告', {
            confirmButtonText: '确定',
            type: 'warning',
          });
          break;
        default:
          // 这里可以处理其他状态或直接调用父组件传递的事件
          this.$emit('useTool');
      }
    },
      // 如果需要，可以在这里处理状态逻辑，但当前情况直接使用计算属性更简洁
      getStatusIcon(status) {
         switch (status) {
           case 0:
             return ['fas', 'check-circle'];
           case 1:
             return ['fas', 'times-circle'];
           case 2:
             return ['fas', 'sync-alt'];
           case 3:
             return ['fas', 'ban'];
           default:
             return [];
         }
       },
    },
    computed: {
      
    },
  };
  </script>
  

<style scoped>
.tool-card {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  border-radius: 5px;
  text-align: center;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
  }
}

.tool-card i {
  font-size: 3rem;
  color: #4CAF50;
  margin-bottom: 1rem;
}

.button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 1rem;
}

.button:hover {
  background-color: #45a049;
}
.custom-button {
  background-image: linear-gradient(to right, #4CAF50, #66BB6A); /* 渐变背景 */
  color: white;
  border: 1px solid transparent; /* 边框透明，悬停时改变 */
  padding: 10px 20px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 1rem;
  transition: all 0.3s ease; /* 平滑过渡效果 */
  font-weight: bold;
}

.custom-button:hover {
  border-color: #45a049; /* 悬停时边框颜色变化 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加轻微阴影 */
}

/* 可选：为按钮添加一些深度效果 */
.custom-button:active {
  background-image: linear-gradient(to right, #66BB6A, #4CAF50);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}
.status-icon {
  position: absolute;
  top: 10px; /* 调整位置使其位于右上角 */
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-normal {
  background-color: #4CAF50; /* 绿色表示正常 */
}

.status-error {
  background-color: #F44336; /* 红色表示异常 */
}

.status-update {
  background-color: #FFC107; /* 黄色表示更新 */
}

.status-disabled {
  background-color: #757575; /* 灰色表示停用 */
  opacity: 0.5;
}
.status-icon {
  position: absolute;
  top: 10px; /* 调整位置使其位于右上角 */
  right: 10px;
  /* 其他样式可能需要根据图标大小和设计需求调整 */
}

</style>
